<template>
  <view class="index-page">
    <tm-sticky-header>
      <view
        class="flex flex-row-center-start pa-n10"
        :style="{ backgroundColor: defaultColor }"
      >
        <view class="mr-n5">
          <tm-image
            :round="100"
            :width="88"
            :height="88"
            :src="userInfo.avatarUrl"
          ></tm-image>
        </view>
        <view class="flex-1">
          <tm-row
            class="flex-row-center-start"
            bgColor="primary"
            style="background-color: primary"
          >
            <tm-text color="#fff" class="mr-10">{{ userInfo.name }}</tm-text>
            <tm-icon name="arrow-right-s-line" color="#fff"></tm-icon>
          </tm-row>
          <tm-row>
            <tm-image
              class="flex mr-10"
              width="30"
              height="30"
              :src="IconUserLevel"
            ></tm-image>
            <tm-text color="#fff">{{ userInfo.vipName }}</tm-text>
          </tm-row>
        </view>
        <view class="flex-shrink">
          <view
            class="flex-row-center-start round-2 flex pa-15"
            style="background-color: #fff"
          >
            <tm-image
              :src="IconPhont"
              :width="40"
              :height="40"
              class="custom-tm-image mr-10"
            ></tm-image>
            <tm-text style="white-space: no-wrap">{{
              $trans("pages.index.customerSupport")
            }}</tm-text>
          </view>
        </view>
      </view>
    </tm-sticky-header>
    <!--  -->
    <tm-row class="mt-20">
      <!-- swiper -->
      <swiper
        class="swiper"
        circular
        :previous-margin="swiperConfig.previousMargin"
        :next-margin="swiperConfig.previousMargin"
        :autoplay="swiperConfig.autoplay"
        :interval="swiperConfig.interval"
        :duration="swiperConfig.duration"
      >
        <swiper-item v-for="item in Array.from({ length: 4 })" :key="item">
          <view class="px-n4">
            <tm-image
              class="round-5"
              height="210"
              :src="`https://store.tmui.design/api_v2/public/random_picture`"
            ></tm-image>
          </view>
        </swiper-item>
      </swiper>
    </tm-row>
    <!--  -->
    <!-- <tm-row class="mt-20">
      <swiper
        class="swiper"
        circular
        :previous-margin="swiperConfig.previousMargin"
        :next-margin="swiperConfig.previousMargin"
        :autoplay="swiperConfig.autoplay"
        :interval="swiperConfig.interval"
        :duration="swiperConfig.duration"
      >
        <swiper-item>
          <view class="px-n4">
          </view>
        </swiper-item>
      </swiper>
    </tm-row> -->
    <!--  -->
    <tm-row column="2">
      <tm-col :span="1">
        <tm-text>{{ $trans("pages.index.searchCardTitle") }}</tm-text>
      </tm-col>
      <tm-col :span="1"></tm-col>
    </tm-row>
  </view>
</template>
<script lang="ts" setup>
import IconUserLevel from "@/assets/images/icon-user-level.png"
import IconPhont from "@/assets/images/icon-phone.png"
import { getDefaultColor } from "@/uni_modules/tm-ui/libs/colors"
const userInfo = ref({
  avatarUrl: "https://store.tmui.design/api_v2/public/random_picture",
  name: "Jabari",
  vipName: "Bronze VIP",
})

const defaultColor = ref("")

const swiperConfig = reactive({
  autoplay: true,
  interval: 3000,
  duration: 500,
  previousMargin: uni.upx2px(40) + "px",
  nextMargin: uni.upx2px(40) + "px",
})

onMounted(() => {
  defaultColor.value = getDefaultColor("primary")
  console.log(defaultColor.value)
})
</script>
<style>
swiper {
  width: 100%;
  height: 210rpx;
}
/* .swiper-item {
  height: 300rpx;
} */
</style>
